<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" title="">
            <li id="first1">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
    </div>
    <!-- <span>12132</span>
    <span>12132</span>
    <span>12132</span>
    <span>12132</span> -->

</body>
<script>
    // 节点
    // 文档节点  元素节点  属性节点 文本节点 注释节点

    // 层级关系
    // 父节点
    // 子节点
    // 同胞节点  

    var one = document.querySelector(".one");
    // console.log(one);

    // 父
    // 父节点  父元素    => 父节点和父元素没区别的 
    // Element.parentNode
    // Element.parentElement
    // !!!!!!! IE中均可以使用

    // console.log(one.parentNode);
    // console.log(one.parentElement);

    // 子
    // 子节点  子元素
    // Element.childNodes    子节点(元素节点 文本节点 注释节点)
    // Element.children      子元素
    // !!!!!!! IE中均可以使用 
    // 因为IE低版本中换行 不会产生文本节点 => 排除注释节点之后 => 子节点 等同于 子元素

    console.log(one.childNodes);
    console.log(one.children);


    // 第一个子节点  第一个子元素
    // Element.firstChild    第一个子节点
    // Element.firstElementChild   第一个子元素

    // 常规浏览器 两个属性都有
    // 低版本IE   不存在firstElementChild

    // 因为IE低版本中换行 不会产生文本节点 => 排除注释节点之后 => 子节点 等同于 子元素(集合中剩下的都是子元素)   
    // => 此时第一个节点就是第一个元素 
    // => 此时最后一个节点就是最后一个元素 
    // => 此时前一个节点就是前一个元素 
    // => 此时后一个节点就是后一个元素 

    // console.log(one.firstChild);
    // console.log(one.firstElementChild);


    // 兼容   查找前一个元素    
    // 常规浏览器   Element.firstElementChild  
    // 低版本IE     Element.firstChild

    // 常规浏览器 和 IE的 用到的属性和方法不同  => 兼容(以常规浏览器为主)

    // if(one.firstElementChild){ // 有值 => 常规浏览器
    //     console.log(one.firstElementChild);
    // }else{ // 没有值 => IE
    //     console.log(one.firstChild);
    // }

    // first()  接收一个元素节点  返回该元素的第一个子元素
    function first(ele){
        // if(ele.firstElementChild){ // 有值 => 常规浏览器
        //    return ele.firstElementChild;
        // }else{ // 没有值 => IE
        //    return ele.firstChild;
        // }

        // return ele.firstElementChild ? ele.firstElementChild : ele.firstChild;
        return  ele.firstElementChild ||  ele.firstChild;
    }


    function last(ele){
        // if(ele.lastElementChild){ // 有值 => 常规浏览器
        //    return ele.lastElementChild;
        // }else{ // 没有值 => IE
        //    return ele.lastChild;
        // }
           
        // return ele.lastElementChild ? ele.lastElementChild : ele.lastChild;
        return  ele.lastElementChild ||  ele.lastChild;
    }

    function prev(ele){
        return  ele.previousElementSibling ||  ele.previousSibling;
    }

    function next(ele){
        return  ele.nextElementSibling ||  ele.nextSibling;
    }





    // 最后一个子节点  最后一个子元素
    // Element.lastChild
    // Element.lastElementChild
    // console.log(one.lastChild);
    // console.log(one.lastElementChild);


    // 同胞
    // 前一个 同胞节点  前一个 同级元素
    // Element.previousSibling            前一个节点
    // Element.previousElementSibling     前一个元素 

    // var second = document.querySelector(".second");
    // console.log(second.previousSibling);
    // console.log(second.previousElementSibling);

    // 后一个 同胞节点  后一个 同级元素
    // Element.nextSibling            后一个节点
    // Element.nextElementSibling     后一个元素 

    // var second = document.querySelector(".second");
    // console.log(second.previousSibling);
    // console.log(second.previousElementSibling);



</script>

</html>